import { NextComponentType } from "next";
import React, { useEffect, useState } from "react";

const TextToImg = (props: { text: string }) => {
  const [src, setSrc] = useState("");
  useEffect(() => {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
    canvas.width = 200;
    canvas.height = 100;

    ctx.fillStyle = "rgb(48,120,198)";
    ctx.fillRect(0, 0, 200, 100);

    ctx.font = "bold 30px serif ";
    ctx.fillStyle = "white";
    ctx.fillText(props.text || "暂无", 10, 60);

    const image = canvas.toDataURL();
    setSrc(image);
    ctx.fill();
  }, []);

  return <img {...props} src={src}></img>;
};
export default TextToImg;
